<template>
  <div class="layout">
    <el-container class="container">
      <el-header class="header">
        <ul class="header-ul">
          <li class="el-icon-s-fold f22" @click="bol=!bol"></li>
          <li>
            <img src="@/assets/img/layout-logo.png" alt />
          </li>
          <li class="t1">黑马面面</li>
          <li class="header-split"></li>
          <li>
            <img
              v-if="$store.state.userInfo!=''"
              class="header-userIcon"
              :src=" baseURL+'/'+$store.state.userInfo.avatar"
              alt
            />
          </li>
          <li class="t2">{{$store.state.userInfo.username}},您好</li>
          <li>
            <el-button type="primary" @click="userLogout">退出</el-button>
          </li>
        </ul>
      </el-header>
      <el-container>
        <el-aside width="auto" class="aside">
          <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            :collapse="bol"
            router
          >
            <el-menu-item index="/layout/chart">
              <i class="el-icon-pie-chart"></i>
              <span slot="title">数据概览</span>
            </el-menu-item>
            <el-menu-item index="/layout/userList">
              <i class="el-icon-user"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
            <el-menu-item index="/layout/question">
              <i class="el-icon-edit-outline"></i>
              <span slot="title">题库列表</span>
            </el-menu-item>
            <el-menu-item index="/layout/business">
              <i class="el-icon-office-building"></i>
              <span slot="title">企业列表</span>
            </el-menu-item>
            <el-menu-item index="/layout/subject">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">学科列表</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
// 获取用户信息,用户退出
import { getUserInfo, logout } from "@/api/layout.js";
// 删除token
import { removeLocal, getLocal } from "@/utils/local.js";
export default {
  data() {
    return {
      userInfo: "",
      baseURL: process.env.VUE_APP_URL,
      bol: false // 是否折叠展开
    };
  },
  methods: {
    userLogout() {
      this.$confirm("确定要退出吗? 是否继续", {
        confirmButtonText: "狠心离开",
        cancelButtonText: "继续看看",
        type: "warning",
        center: true
      }).then(() => {
        logout().then(() => {
          // 1.提示用户
          this.$message.success("退出登录成功!");
          // 2.清除token
          removeLocal();
          // 3.跳转到登录路由
          this.$router.push("/login");
        });
      });
    }
  },
  created() {
    // 进入首页，先判断用户是否有token
    if (!getLocal()) {
      // 进到这里则说明用户本地没用token
      // 将其打回到登录页
      this.$router.push("/login");
      return;
    }

    // 发送请求获取接口
    getUserInfo().then(res => {
      // 将用户信息保存, 此时我们不再需要关心错误处理，响应拦截已经做了错误处理
      // window.console.log(this.$store);
      this.$store.state.userInfo = res.data;
    });
  }
};
</script>
<style lang="less" scoped>
.layout {
  height: 100%;
  .container {
    height: 100%;
    .header {
      .header-ul {
        display: flex;
        height: 100%;
        align-items: center;
        .header-split {
          flex: 1;
        }
        .f22 {
          font-size: 22px;
          margin-right: 20px;
          cursor: pointer;
        }
        .t1 {
          font-size: 22px;
          font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
          font-weight: bold;
          text-align: left;
          color: #49a1ff;
          letter-spacing: 1px;
          margin-left: 20px;
        }
        .header-userIcon {
          width: 45px;
          height: 45px;
          border-radius: 50%;
        }
        .t2 {
          font-size: 14px;
          font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
          font-weight: bold;
          text-align: left;
          color: #636363;
          letter-spacing: 0px;
          margin-left: 20px;
          margin-right: 30px;
        }
      }
    }
    .aside {
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
      }
    }
    .main {
      background-color: #ccc;
    }
  }
}
</style>
<style>
.spinner-icon {
  display: none;
}
</style>